<!-- 管理员界面 -->
<title>后台管理员</title>

<div class="layui-card layadmin-header">
	<div class="layui-breadcrumb" lay-filter="breadcrumb">
		<a lay-href="">主页</a>
		<a><cite>用户</cite></a>
		<a><cite>后台管理员</cite></a>
	</div>
</div>

<!-- 顶部查询 -->
<div class="layui-fluid">
	<div class="layui-card">
		<!-- 中部 -->
		<div class="layui-card-body">
			<div class="layui-btn-container" style="display: inline-block;">
				<button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
					<i class="layui-icon">&#xe668;</i>展开全部
				</button>
				<button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
					<i class="layui-icon">&#xe66b;</i>折叠全部
				</button>
			</div>

			<!-- 表格开始 -->
			<div class="demo-side">
				<table id="LAY-dept-back-manage"></table>
			</div>
			<!-- 表格操作列 -->
			<script type="text/html" id="tbBar">
				<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			</script>
		</div>
	</div>
</div>
<script>
	layui.use(['layer', 'util', 'treeTable', "setter", "view", "form", "admin"], function() {
		var $ = layui.jquery;
		var layer = layui.layer;
		var view = layui.view;
		var form = layui.form;
		var admin = layui.admin;
		var setter = layui.setter;
		var util = layui.util;
		var treeTable = layui.treeTable;

		// 渲染表格
		var insTb = treeTable.render({
			elem: '#LAY-dept-back-manage',
			method: "post",
			url: setter.api_source + 'dept/list',
			parseData: function(res) { //res 即为原始返回的数据
				return {
					"code": res.code, //解析接口状态
					"msg": res.message, //解析提示文本
					"count": res.data.total, //解析数据长度
					"data": res.data.rows //解析数据列表
				};
			},
			toolbar: 'default',
			height: 'full-200',
			tree: {
				iconIndex: 2,
				isPidData: true,
				idName: 'id',
				pidName: 'parentId'
			},
			defaultToolbar: ['filter', 'print', 'exports', {
				title: '提示',
				layEvent: 'LAYTABLE_TIPS',
				icon: 'layui-icon-tips'
			}],
			cols: [

				{
					type: 'numbers'
				},
				{
					type: 'checkbox'
				},
				{
					field: 'name',
					title: '部门'
				},
				{
					field: 'id',
					title: 'ID'
				},
				{
					field: 'sortCode',
					title: '排序码'
				},
				{
					align: 'center',
					toolbar: '#tbBar',
					title: '操作',
					width: 120
				}

			],
			style: 'margin-top:0;'
		});


		// 工具列点击事件
		treeTable.on('tool(LAY-dept-back-manage)', function(obj) {
			var data = obj.data;

			var event = obj.event;
			// 删除
			if (event === 'del') {
				layer.confirm('确定删除吗？', function(index) {
					admin.req({
						type: "get",
						url: setter.api_source + 'dept/delete/' + data["id"],
						beforeSend: function(XMLHttpRequest) {},
						success: function(data, textStatus) {
							init();
							insTb.reload();
							layer.msg('删除成功');
						},
						complete: function(XMLHttpRequest, textStatus) {
							// HideLoading();
						},
						error: function() {
							//请求出错处理
							layer.msg('删除错误');
						}
					});
				});
				// 编辑
			} else if (event === 'edit') {
				admin.popup({
					title: '编辑菜单',
					area: ['420px', '450px'],
					id: 'LAY-popup-dept-edit',
					success: function(layero, index) {
						view(this.id).render('user/tes/dept/depteditform', data).done(function() {
							//更新 lay-filter="test1" 所在容器内的全部表单状态
							form.render(null, 'dept-edit-form');
							//监听提交
							form.on('submit(LAY-dept-back-submit)', function(data) {
								var field = data.field; //获取提交的字段
								console.log(field);
								// TODO
								admin.req({
									type: "post",
									data: field,
									url: setter.api_source + 'dept/update',
									beforeSend: function(XMLHttpRequest) {
										//ShowLoading();
									},
									success: function(data, textStatus) {
										insTb.reload();
										init();
										layer.msg('更新成功');
										layer.close(index);
									},
									complete: function(XMLHttpRequest, textStatus) {
										//HideLoading();
									},
									error: function() {
										//请求出错处理
									}
								});

							});
						});
					}
				});
			}
		});
		
		// 初始化
		var optionlist = [];
		function init(){
			admin.req({
				type: "post",
				url: setter.api_source + 'dept/optionlist',
				beforeSend: function(XMLHttpRequest) {
					//ShowLoading();
				},
				success: function(data, textStatus) {
					optionlist = data.data.options
					console.log(optionlist);
				},
				complete: function(XMLHttpRequest, textStatus) {
					//HideLoading();
				},
				error: function() {
					//请求出错处理
				}
			});
		}
		init();




		// 头部工具栏点击事件
		treeTable.on('toolbar(LAY-dept-back-manage)', function(obj) {
			switch (obj.event) {
				// 添加
				case 'add':
					admin.popup({
						title: '添加菜单',
						area: ['420px', '450px'],
						id: 'LAY-popup-dept-add',
						success: function(layero, index) {
							view(this.id).render('user/tes/dept/deptaddform',optionlist).done(function() {
								//更新 lay-filter="test1" 所在容器内的全部表单状态
								form.render(null, 'dept-add-form');


								//监听提交
								form.on('submit(LAY-dept-back-submit)', function(data) {
									var field = data.field; //获取提交的字段
									// TODO
									admin.req({
										type: "post",
										data: field,
										url: setter.api_source + 'dept/add',
										beforeSend: function(XMLHttpRequest) {
											//ShowLoading();
										},
										success: function(data, textStatus) {
											insTb.reload();
											init();
											layer.msg('添加成功');
											layer.close(index); // 关闭弹出层
										},
										complete: function(XMLHttpRequest, textStatus) {
											//HideLoading();
										},
										error: function() {
											//请求出错处理
										}
									});
								});
							});
						}
					});
					break;
				case 'delete':
					layer.msg('删除');
					break;
				case 'update':
					layer.msg('编辑');
					break;
				case 'LAYTABLE_TIPS':
					layer.msg('提示');
					break;
			}
		});


		// 全部展开
		$('#btnExpandAll').click(function() {
			insTb.expandAll();
		});
		// 全部折叠
		$('#btnFoldAll').click(function() {
			insTb.foldAll();
		});
	});
</script>
